<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部导航 -->
    <nav>
        <input type="text" class="search" placeholder="搜索:目的地/酒店/经典/航班号">
        <span class="username">我 的</span>
    </nav>

    <!-- 轮播图 -->
    <div class="banner">
        <div class="img-box">
            <img src="./images/banner04.jpg" alt="">
            <img src="./images/banner01.jpg" alt="">
            <img src="./images/banner02.jpg" alt="">
            <img src="./images/banner03.jpg" alt="">
            <img src="./images/banner04.jpg" alt="">
            <img src="./images/banner01.jpg" alt="">
        </div>

        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

    </div>

    <!-- 内容 -->
    <main>
        <!-- 攻略 -->
        <div class="introduction">
            <li><span></span>攻略-经典</li>
            <li><span></span>门票-玩乐</li>
            <li><span></span>美食林</li>
            <li><span></span>周边游</li>
            <li><span></span>一日游</li>
        </div>

        <!-- 预定 -->
        <div class="reserve">
            <!-- 常用 -->
            <div class="commonly-used">
                <!-- 酒店 -->
                <div class="hotel">
                    <li style="text-align: left;"><span style="margin-left: 10px;">酒店</span></li>
                    <li>民宿-客栈</li>
                    <li>火车票</li>
                    <li>机票</li>
                </div>

                <!-- 机票 -->
                <div class="flight">
                    <li style="text-align: left;"><span style="margin-left: 10px;">机票</span></li>
                    <li>火车票</li>
                    <li>汽车船票</li>
                    <li>专车-租车</li>
                </div>

                <!-- 旅游 -->
                <div class="travel">
                    <li style="text-align: left;"><span style="margin-left: 10px;">旅游</span></li>
                    <li>高铁旅</li>
                    <li>游船旅</li>
                    <li>定制旅</li>
                </div>
            </div>

            <!-- 更多-->
            <div class="more">
                <!-- 自由行 -->
                <div class="ziyou">
                    <li><span></span>自由行</li>
                    <li><span></span>WIFI电话卡</li>
                    <li><span></span>保险-签证</li>
                    <li><span></span>换钞-购物</li>
                    <li><span></span>当地向导</li>
                </div>


                <div class="tejia">
                    <li><span></span>特价机票</li>
                    <li><span></span>礼品卡</li>
                    <li><span></span>申卡-借钱</li>
                    <li><span></span>lvpai</li>
                    <li><span></span>更多</li>
                </div>
            </div>

        </div>

        <!-- 特卖汇 -->
        <div class="discount">

            <div class="head"><span>更多></span></div>

            <div class="left">
                <div class="img-box">
                    <img class="auto-img" src="./images/pic-tmh-01.jpg" alt="">
                </div>
                <div class="text-box">
                    <p>三亚5日自由行(5钻)·节后错峰款【高星度假型酒店合辑·4晚连住】预订赠出行礼遇·网红酒店|唯美海滩|亲子宅玩|海鲜盛宴|惬意泳池|热剧取景地·暖秋当红旅行地 累计超6万人真实出行！</p>
                    ￥<span>1504</span>起
                </div>
            </div>

            <div class="right">
                <div class="top">
                    <div class="text-box">
                        <p>千款特价</p>
                        <p>走过路过不错过</p>
                    </div>

                    <div class="img-box">
                        <img class="auto-img" src="./images/pic-tmh-02.png" alt="">
                    </div>
                </div>

                <div class="bottom">
                    <div class="left">
                        <p>境外精选</p>
                        <p>限时抢购</p>
                        <img class="auto-img" src="./images/pic-tmh-03.png" alt="">
                    </div>
                    <div class="right">
                        <p>周边玩乐</p>
                        <p>欢乐度周末</p>
                        <img class="auto-img" src="./images/pic-tmh-04.png" alt="">
                    </div>
                </div>

            </div>

        </div>

        <div class="zhuangshi"></div>
        <!-- 热门活动 -->
        <div class="activity">
            <div class="head"><span>获取更多福利></span>
                <div class="advertising-icon"><img class="auto-img" src="./images/icon-gg.png" alt=""></div>
            </div>

            <div class="content">
                <img src="./images/huodong01.png" alt="">
                <img src="./images/huodong02.png" alt="">
                <img src="./images/huodong03.jpg" alt="">
                <img src="./images/huodong04.jpg" alt="">
                <img src="./images/huodong05.jpg" alt="">
                <img src="./images/huodong06.jpg" alt="">
            </div>
        </div>

        <div class="zhuangshi"></div>

        <!-- 下载 -->
        <div class="download">
            <div class="phone">
                <img class="auto-img" src="./images/24gl-telephone.png" alt="">
                <p>电话预订</p>
            </div>
            <div class="client">
                <img class="auto-img" src="./images/下载.png" alt="">
                <p>下载客户端</p>
            </div>
            <div class="my">
                <img class="auto-img" src="./images/我的.png" alt="">
                <p>我的</p>
            </div>
        </div>

    </main>

    <footer>
        <div>网站地图｜ Language ｜ 电脑版</div>
        <div>©2019粤嵌H5前端开发｜粤ICP备XXXXXXXX号-XXXXXX</div>
    </footer>


    <script>
        // 获取导航栏
        var nav = document.querySelector("nav");

        var banner = document.querySelector(".banner>.img-box");

        var img = document.querySelectorAll(".banner>.img-box>img");

        var li = document.querySelectorAll(".banner>ul>li");
        console.log(li);
        // 一张轮播图的宽度
        var imgWidth = img[0].offsetWidth;

        // 给window绑定页面滚动事件,设置导航栏背景颜色
        window.onscroll = function () {
            var scrollY = window.pageYOffset;
            if (scrollY >= 100) {
                nav.style.backgroundColor = "#ccc";
            } else {
                nav.style.backgroundColor = "transparent";
            }
        }

        // 定时器
        var index = 1;
        var timer = null;
        function _banner() {

            timer = setInterval(function () {
                index++;
                banner.style.transition = "transform 1s";
                banner.style.transform = `translatex(${-375 * index}px)`;

            }, 2000);
        }
        _banner();

        banner.ontransitionend = function () {
            if (index == 5) {
                banner.style.transition = "none";
                index = 1;
                banner.style.transform = `translatex(${-375 * index}px)`;
            }
            if( index == 0) {
                banner.style.transition = "none";
                index = 4;
                banner.style.transform = `translatex(${-375 * index}px)`;
            }
            for (var i = 0; i < li.length; i++) {
                li[i].classList.remove("active");
            }
            li[index - 1].classList.add("active");
        }


        var affterX = 0;
        banner.ontouchstart = function (e) {
            clearInterval(timer);
            var X = e.targetTouches[0].pageX;
            banner.ontouchmove = function (e) {
                var moveX = e.targetTouches[0].pageX;
                affterX = moveX - X;
                console.log(affterX);
                banner.style.transition = "none";
                banner.style.transform = `translatex(${-375 * index + affterX}px)`;

            }
        }

        banner.ontouchend = function () {
            _banner();
            if (Math.abs(affterX) > 100) {
                if (affterX > 0) {
                    index -= 1;
                    banner.style.transition = "transform 1s";
                    banner.style.transform = `translatex(${-375 * index}px)`;
                }else {
                    index += 1;
                    banner.style.transition = "transform 1s";
                    banner.style.transform = `translatex(${-375 * index}px)`;
                }
            }else {
                banner.style.transition = "transform 1s";
                banner.style.transform = `translatex(${-375 * index}px)`;
            }
        }

    </script>
</body>

</html>